import { Button, Divider } from 'antd';
import { useState, useEffect } from 'react'
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
import { resourcePath } from '../../../../../utils/resource';
import { routes } from '../../../../../utils/routes';
import './index.less';
export default function Center(props) {
    const pathname = useLocation().pathname;
    const history = useHistory();

    const createItem = (item, to) => {
        const bgStyle = {
        fontSize:"1vw",
        //boxSizing:" border-box", /* 盒子模型属性 */
        height: "8vh",
        width: "7vw",
        lineHeight: "8vh",
        padding:0,
        overflow: "hidden",
    
        //     textAlign: "center", 
        };

        if (pathname.indexOf(item.path) > -1) {
            bgStyle.backgroundImage = `url(${resourcePath.menuSelectedPng})`;
            bgStyle.backgroundSize = `100% 100%`;
        }
        return <span className='link' style={bgStyle} onClick={e => {
            to ? to() : history.push(item.path)
        }}>{item.title}</span>
    }

    return <>
        <div className='layout-h center header-center' style={{
            width: "72vw",
            height: "5vh",
           //border: "1px solid black",
        }}>
            <div className='left fill' style={{
                textAlign: 'right', 
                //fontSize:"1vh",
                height: "8vh",
                width: "21vw",
              //border: "1px solid black",
            }}>
                {createItem(routes.home)}
                {createItem(routes.yzt)} 
                {/* <Divider type="vertical" /> */}
                {/* {createItem(routes.fxfx)} */} 
                {createItem(routes.jcyj)}
            </div>
            <div className='title' style={{
                fontWeight: 'bold',
                fontSize: "1.7vw",
                //textAlign: "center",
                cursor: 'pointer',
                width: "30vw",
                background: `url(${resourcePath.title1})`,
                backgroundSize:"100% 100%",
                height: "6vh",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
            }}
                onClick={e => {
                    history.push('/main/home')
                }}
            >
                监测预警子系统</div>
            <div className='right fill' style={{
                height: "8vh",
                width: "21vw",
               
            }}>
                {createItem(routes.fxqhfx)}
                {createItem(routes.dtfxfx)}
                {createItem(routes.zhpg)}
                {/* {createItem(routes.manager, () => {
                    window.open(process.env.PUBLIC_URL + routes.manager.path, '_blank');
                })} */}
                
            </div>
        </div>
    </>;
}